<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="Devicestatus"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  var chartDom = document.getElementById("Devicestatus");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
    //   text: "设备状态",
      left: "center",
    },
    tooltip: {
      // trigger: "item",
      formatter: "{b}:({d}%)"
    },
    legend: {
      orient: "vertical",
      left: "left",
      textStyle: {
        color: "#fff",
      }
    },
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 90, name: "在线状态", itemStyle: { color: "#00FF00"} },
          { value: 10, name: "离线状态", itemStyle: { color: "#FF0000"} },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped>
#Devicestatus {
    width: 41vw;
    height: 40vh;
}


</style>